<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day06_demo03</title>
<style>
	.ok{
		color:green;
	}
	
	.error{
		color:red;
	}



</style>
<script>
	function checkCode(){
		//获取账号
		var code=document.getElementById("code").value;
		//获取span
		var span=document.getElementById("code_msg");
		//检查格式
		var reg=/^\w{6,15}$/;
		if(reg.test(code)){
			//格式正确,变绿
			span.className="ok";	
			return true;
			
		}else{
			//格式错误,变红
			span.className="error";
			return false;
		}
	}
	
	function checkPwd(){
		var pwd=document.getElementById("pwd").value;
		var span=document.getElementById("pwd_msg");		
		var reg=/^\w{6,20}$/;
		if(reg.test(pwd)){
			span.className="ok";
			return true;
		}else{
			span.className="error";
			return false;
		}
	}
	
	
	
</script>

</head>
<body>
	<form action="http://www.tmooc.cn" 
		onsubmit="return checkCode()+checkPwd()==2;">
		<p>
			账号:
			<input type="text" id="code" onblur="checkCode();"/>		
			<span id="code_msg">6-15位字母.数字.下划线</span>
		</p>
		<p>
			密码:
			<input type="password" id="pwd" onblur="checkPwd();"/>
			<span id="pwd_msg">6-20位字母.数字.下划线</span>
		</p>
		<p>
			<input type="submit" value="登录"/>	
		</p>
		
		
		
		
	</form>
	
</body>
</html>